<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=pSXlbNPp1pMk1SXZLww8lxWFoO31jxNT"></script>
    <meta charset="UTF-8">
    <title>门店查询</title>
    <link rel="stylesheet" href="css/style-4.css">
    <link rel="icon" href="img/tltle.ico" type="image/x-icon">
    <style type="text/css">
        body, html{
            width: 100%;
            height: 100%;
            margin:0;
            font-family:"微软雅黑",serif;
        }
        #allmap{
            height:600px;
            width:100%;
        }
        #r-result{
            width:100%;
            font-size:14px;
        }
    </style>
    <style>
        @keyframes da {
            0%{
                background-color: rgba(0,0,0,0);
            }
            100%{
                background-color: rgba(0,0,0,0.5);
            }
        }
        .boxa{
            position: absolute;
            top: 0;
            left: 0;
            background-color: rgba(0,0,0,0.5);
            width: 100%;
            height: 100%;
            z-index: 4;
            display: none;
            animation-name: da;
            animation-duration: 0.5s;
        }
    </style>
</head>
<body>

<div class="warper">
    <div class="header-inner clearfix">
        <div class="header clearfix">
            <div class="header-a">
                <a href="index.html"><img src="img/logo.png" alt=""></a>
            </div>
            <div class="sf clearfix">
                <div id="asd" class="search clearfix">
                    <div class="in"></div>
                    <a href="">English</a>
                </div>
                <div class="search-1">
                    <a href="#" class="q1 tit">品牌活动</a>
                    <a href="#" class="q2 tit">新品推荐</a>
                    <a href="index-2.html" class="q3 tit">WEDDING</a>
                    <a href="#" class="q4 tit">高级珠宝</a>
                    <a href="#" class="q5 tit">钻石类品</a>
                    <a href="#" class="q6 tit">品牌介绍</a>
                    <a href="#" class="q7 tit">时尚资讯</a>
                    <a href="index-3.html" class="q8 tit">品牌服务</a>
                </div>
            </div>
        </div>
        <div class="header-bei clearfix">
            <div class="header-a">
                <a href="index.html"><img src="img/logo-1.png" alt=""></a>
            </div>
            <div class="sf">
                <div class="search clearfix">
                    <div class="in" id="abc"></div>
                    <a href="">English</a>
                </div>
                <div class="search-1">
                    <a href="#" class="q1">品牌活动</a>
                    <a href="#" class="q2">新品推荐</a>
                    <a href="index-2.html" class="q3">WEDDING</a>
                    <a href="#" class="q4">高级珠宝</a>
                    <a href="#" class="q5">钻石类品</a>
                    <a href="#" class="q6">品牌介绍</a>
                    <a href="#" class="q7">时尚资讯</a>
                    <a href="index-3.html" class="q8">品牌服务</a>
                </div>
            </div>
        </div>
        <div id="box" class="boxa">
            <div class="sw-1  clearfix">
                <div class="sw-left">
                    <div class="q-1-3">
                        <span>品牌活动</span>
                    </div>
                    <div class="q-1">
                        <div class="q-1-1">
                            <img src="img/bg-3.png" alt="">
                            <a href="">50克拉全球设计甄选</a>
                            <img src="img/bg-3.png" alt="">
                            <a href="">金伯利之星</a>
                        </div>
                        <div class="q-1-1">
                            <img src="img/bg-3.png" alt="">
                            <a href="">2018KDC国际设计大赛</a>
                            <img src="img/bg-3.png" alt="">
                            <a href="">巴塞尔展</a>
                        </div>
                    </div>
                </div>
                <div class="sw-right">
                    <img src="img/bg-2.jpg" alt="">
                </div>
            </div>

            <div class="sw-2 clearfix">
                <div class="sw-left">
                    <div class="q-1-3">
                        <span>新品推荐</span>
                    </div>
                    <div class="q-1">
                        <div class="q-1-1">
                            <img src="img/bg-3.png" alt="">
                            <a href="">臻我之歌</a>
                            <img src="img/bg-3.png" alt="">
                            <a href="">爱·主题之永恒去</a>
                        </div>
                        <div class="q-1-1">
                            <img src="img/bg-3.png" alt="">
                            <a href="">结系列-纪念日</a>
                            <img src="img/bg-3.png" alt="">
                            <a href="">爱的旅程</a>
                        </div>
                        <div class="q-1-1">
                            <img src="img/bg-3.png" alt="">
                            <a href="">结系列—玩趣</a>
                            <img src="img/bg-3.png" alt="">
                            <a href="">INFINITY STORY</a>
                        </div>
                        <div class="q-1-1">
                            <img src="img/bg-3.png" alt="">
                            <a href="">INFINITY U</a>
                            <img src="img/bg-3.png" alt="">
                            <a href="">爱的印记</a>
                        </div>
                        <div class="q-1-1">
                            <img src="img/bg-3.png" alt="">
                            <a href="">幸福时刻</a>
                            <img src="img/bg-3.png" alt="">
                            <a href="">爱·唯一</a>
                        </div>
                        <div class="q-1-1">
                            <img src="img/bg-3.png" alt="">
                            <a href="">皇室花园</a>
                            <img src="img/bg-3.png" alt="">
                            <a href="">女神之光</a>
                        </div>
                    </div>
                </div>
                <div class="sw-right">
                    <img src="img/bg-4.png" alt="">
                </div>
            </div>

            <div class="sw-3 clearfix">
                <div class="sw-left">
                    <div class="q-1-3">
                        <span>WEDDINC</span>
                    </div>
                    <div class="q-1">
                        <div class="q-1-1">
                            <img src="img/bg-3.png" alt="">
                            <a href="">情侣对戒</a>
                            <img src="img/bg-3.png" alt="">
                            <a href="">克拉钻</a>
                        </div>
                    </div>
                </div>
                <div class="sw-right">
                    <img src="img/bg-5.jpg" alt="">
                </div>
            </div>

            <div class="sw-4 clearfix">
                <div class="sw-left">
                    <div class="q-1-3">
                        <span>高级珠宝</span>
                    </div>
                    <div class="q-1">
                        <div class="q-1-1">
                            <img src="img/bg-3.png" alt="">
                            <a href="">曲藏臻宝</a>
                            <img src="img/bg-3.png" alt="">
                            <a href="">OUR STORY</a>
                        </div>
                        <div class="q-1-1">
                            <img src="img/bg-3.png" alt="">
                            <a href="">获奖作品</a>
                            <img src="img/bg-3.png" alt="">
                            <a href="">中国·韵</a>
                        </div>
                        <div class="q-1-1">
                            <img src="img/bg-3.png" alt="">
                            <a href="">"和"系列</a>
                            <img src="img/bg-3.png" alt="">
                            <a href="">华·宋</a>
                        </div>
                        <div class="q-1-1">
                            <img src="img/bg-3.png" alt="">
                            <a href="">时节之美</a>
                        </div>
                    </div>
                </div>
                <div class="sw-right">
                    <img src="img/bg-6.jpg" alt="">
                </div>
            </div>

            <div class="sw-5 clearfix">
                <div class="sw-left">
                    <div class="q-1-3">
                        <span>钻石品类</span>
                    </div>
                    <div class="q-1">
                        <div class="q-1-1">
                            <img src="img/bg-3.png" alt="">
                            <a href="">钻戒</a>
                            <img src="img/bg-3.png" alt="">
                            <a href="">项链</a>
                        </div>
                        <div class="q-1-1">
                            <img src="img/bg-3.png" alt="">
                            <a href="">手镯</a>
                            <img src="img/bg-3.png" alt="">
                            <a href="">耳饰</a>
                        </div>
                        <div class="q-1-1">
                            <img src="img/bg-3.png" alt="">
                            <a href="">男士钻饰</a>
                            <img src="img/bg-3.png" alt="">
                            <a href="">钻石套系</a>
                        </div>
                    </div>
                </div>
                <div class="sw-right">
                    <img src="img/bg-7.jpg" alt="">
                </div>
            </div>

            <div class="sw-6 clearfix">
                <div class="sw-left">
                    <div class="q-1-3">
                        <span>品怕介绍</span>
                    </div>
                    <div class="q-1">
                        <div class="q-1-1">
                            <img src="img/bg-3.png" alt="">
                            <a href="">品牌历史</a>
                            <img src="img/bg-3.png" alt="">
                            <a href="">品牌文化</a>
                        </div>
                        <div class="q-1-1">
                            <img src="img/bg-3.png" alt="">
                            <a href="">故事片</a>
                        </div>
                    </div>
                </div>
                <div class="sw-right">
                    <img src="img/bg-8.jpg" alt="">
                </div>
            </div>

            <div class="sw-7 clearfix">
                <div class="sw-left">
                    <div class="q-1-3">
                        <span>时尚资讯</span>
                    </div>
                    <div class="q-1">
                        <div class="q-1-1">
                            <img src="img/bg-3.png" alt="">
                            <a href="">设计师</a>
                            <img src="img/bg-3.png" alt="">
                            <a href="">最新资讯</a>
                        </div>
                        <div class="q-1-1">
                            <img src="img/bg-3.png" alt="">
                            <a href="">KD时尚</a>
                        </div>
                    </div>
                </div>
                <div class="sw-right">
                    <img src="img/bg-9.jpg" alt="">
                </div>
            </div>

            <div class="sw-8 clearfix">
                <div class="sw-left">
                    <div class="q-1-3">
                        <span>品牌服务</span>
                    </div>
                    <div class="q-1">
                        <div class="q-1-1">
                            <img src="img/bg-3.png" alt="">
                            <a href="">售后服务</a>
                            <img src="img/bg-3.png" alt="">
                            <a href="">联系我们</a>
                        </div>
                        <div class="q-1-1">
                            <img src="img/bg-3.png" alt="">
                            <a href="">门店查询</a>
                            <img src="img/bg-3.png" alt="">
                            <a href="">加盟审批</a>
                        </div>
                    </div>
                </div>
                <div class="sw-right">
                    <img src="img/bg-10.jpg" alt="">
                </div>
            </div>
        </div>
        <div class="dh" id="dh">
            <div class="header-name1">
                PRODUCT
            </div>
            <div class="header-name2">
                search for
            </div>
            <div class="header-input">
                <input type="text" class="head-search-box" placeholder="请输入您要搜索产品的关键字">
                <div class="head-search-btn">
                    搜索
                </div>
            </div>
            <div class="head-search-close"></div>
        </div>

    </div>

    <div class="map-wrap">
        <div class="title">
            <h1>
                <span>门店查询</span>
            </h1>
            <div class="word">
                <p>
                    "为保证广大消费者自身的合法权益，请在购买前通过我公司官方网站核实2019年正规授权“金伯利”钻石专卖店及专柜信息或拨打金伯利钻石客服热线："
                    <strong>400-889-8858</strong>
                    "进行信息核实;我公司从未授权任何组织或个人通过网络平台销售 “金伯利”钻石饰品。"
                </p>
            </div>
        </div>
        <div class="mapselect">
            <form class="form-inline">
                <div data-toggle="distpicker">
                    <h4>区域</h4>
                    <div class="form-group">
                        <select class="form-control" id="province1"></select>
                    </div>
                    <h4>市\县\区</h4>
                    <div class="form-group">
                        <select class="form-control" id="city1"></select>
                    </div>
                    <h4>市\县\区</h4>
                    <div class="form-group">
                        <select class="form-control" id="district1"></select>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="div">
        <div id="allmap"></div>
        <div id="r-result">
            城市名: <input id="cityName" type="text" style="width:100px; margin-right:10px; height: 20px; border-radius: 5px; border: 1px solid gray;outline: none" />
            <input type="button" value="查询" onclick="theLocation()" style="width: 35px;height: 20px;border: none;cursor: pointer;border-radius: 5px;outline: none" />
        </div>
    </div>
    <div class="footer-inner">
        <div class="footer">
            <div class="w88">
                <div class="ft-tp">
                    <img src="img/jiantou.png" alt="">
                </div>
                <div class="ft-nav f-cb">
                    <div class="nav-li">
                        <div class="li-a">
                            <a href="" class="a-ul">品牌介绍</a>
                            <a href="" class="nav-btn">品牌历史</a>
                            <a href="" class="nav-btn">品牌文化</a>
                            <a href="" class="nav-btn">故事片</a>
                        </div>
                        <div class="li-a">
                            <a href="" class="nav-other mt90">品牌介绍</a>
                            <a href="" class="nav-btn">售后服务</a>
                            <a href="" class="nav-btn">联系我们</a>
                            <a href="" class="nav-btn">门店查询</a>
                            <a href="" class="nav-btn">加盟审批</a>
                        </div>
                    </div>
                    <div class="nav-li">
                        <div class="li-a">
                            <a href="" class="a-ul">新品推荐</a>
                            <a href="" class="nav-btn">臻我之歌</a>
                            <a href="" class="nav-btn">爱•乐主题之永恒曲</a>
                            <a href="" class="nav-btn">结系列 - 纪念日</a>
                            <a href="" class="nav-btn">爱的旅程</a>
                            <a href="" class="nav-btn">结系列 - 玩趣</a>
                            <a href="" class="nav-btn">Infinity Story</a>
                            <a href="" class="nav-btn">Infinity U</a>
                            <a href="" class="nav-btn">爱的印记</a>
                            <a href="" class="nav-btn">幸福时刻</a>
                            <a href="" class="nav-btn">爱·唯一</a>
                            <a href="" class="nav-btn">皇室花园</a>
                            <a href="" class="nav-btn">女神之光</a>
                        </div>
                        <div class="li-a">
                            <a href="" class="nav-other mt90">时尚资讯</a>
                            <a href="" class="nav-btn">最新资讯</a>
                            <a href="" class="nav-btn">KD时尚</a>
                            <a href="" class="nav-btn">设计师</a>
                        </div>
                    </div>
                    <div class="nav-li">
                        <div class="li-a">
                            <a href="" class="a-ul">高级珠宝</a>
                            <a href="" class="nav-btn">典藏臻品</a>
                            <a href="" class="nav-btn">Our story</a>
                            <a href="" class="nav-btn">获奖作品</a>
                            <a href="" class="nav-btn">中国·韵</a>
                            <a href="" class="nav-btn">“和”系列</a>
                            <a href="" class="nav-btn">华 • 宋</a>
                            <a href="" class="nav-btn">时节之美</a>
                        </div>
                        <div class="li-a">
                            <a href="" class="nav-other mt90">品牌活动</a>
                            <a href="" class="nav-btn">50克拉全球设计甄选</a>
                            <a href="" class="nav-btn">金伯利之星</a>
                            <a href="" class="nav-btn">2018KDC国际设计大赛</a>
                            <a href="" class="nav-btn">巴塞尔展</a>
                        </div>
                    </div>
                    <div class="nav-li">
                        <div class="li-a">
                            <a href="" class="a-ul"> WEDDING</a>
                            <a href="" class="nav-btn">情侣对戒</a>
                            <a href="" class="nav-btn">克拉钻</a>
                        </div>
                        <div class="li-a">
                            <a href="" class="nav-other mt90">联系我们</a>
                            <a href="" class="nav-btn">TEL:400-889-8858</a>
                            <p>
                                <a href="" class="a-3">
                                    <img src="img/bg-49.png" alt="">
                                </a>
                                <span>: 上海市浦东新区川展路558号</span>
                            </p>
                        </div>
                    </div>
                    <div class="nav-li">
                        <div class="li-a">
                            <a href="" class="a-ul">钻石品类</a>
                            <a href="" class="nav-btn">钻戒</a>
                            <a href="" class="nav-btn">项链</a>
                            <a href="" class="nav-btn">手镯</a>
                            <a href="" class="nav-btn">耳饰</a>
                            <a href="" class="nav-btn">男士钻戒</a>
                            <a href="" class="nav-btn">钻石套系</a>
                        </div>
                        <div class="li-a">
                            <p class="nav-other mt90">关注我们</p>
                            <div class="share">
                                <a href="" class="a-1"></a>
                                <a href="" class="a-2">
                                    <img src="img/bg-54.jpg" alt="" class="ipc">
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="ft-bot f-cb clearfix">
                    <div class="f1">
                        <a href="">网站地图</a>
                        <a href="">公司声明</a>
                        <a href="">钻石知识</a>
                        <a href="">公司简介</a>
                        <a href="">加入我们</a>
                        <a href="">企业邮箱</a>
                    </div>
                    <div class="cent-font">
                        <p>
                            Copyright©2019 金伯利钻石 .All right reserved
                            <a href="">沪ICP备11008681号</a>
                            技术支持: <a href="">博采网络</a>
                            <a href="">站长统计</a>
                        </p>
                        <div class="k-1 clearfix">
                            <img src="img/bg-56.png" alt="">
                            <p>
                                沪公网安备 31011502003948号
                            </p>
                        </div>
                    </div>
                    <div class="fr friend-link">
                        <span class="stit">友情链接</span>
                        <div class="sub-box">
                            <p>
                                <a href="">金伯利钻石（加拿大）</a>
                            </p>
                            <p>
                                <a href="">中国珠宝行业网</a>
                            </p>
                            <p>
                                <a href="">上海钻石交易所</a>
                            </p>
                            <p>
                                <a href="">中国珠宝玉石首饰行业协会</a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<input type="file" style="width: 70px;background-color: #2C8DFB;">
<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("allmap");
    var point = new BMap.Point(116.403007,39.915512);
    map.centerAndZoom(point,11);

    function theLocation(){
        var city = document.getElementById("cityName").value;
        if(city != ""){
            map.centerAndZoom(city,11);      // 用城市名设置地图中心点
        }
    }


    var province1 = document.querySelector("#province1");
    var city1 = document.querySelector("#city1");
    var district1 = document.querySelector("#district1");
    province1.addEventListener('change',function(){
        map.centerAndZoom(this.value,11);
    });
    city1.addEventListener('change',function(){
        map.centerAndZoom(this.value,11);
    });
    city1.addEventListener('change',function(){
        map.centerAndZoom(this.value,11);
    });
</script>
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/distpicker.data.js"></script>
<script src="js/distpicker.js"></script>
<script src="js/script-3.js"></script>
</body>
</html>